<template>
  <div>
    <el-dialog :modelValue="activ"  width="70%" @close="$emit('close-dialog')">
      <el-descriptions
          class="margin-top"
          title="人员详情"
          :column="3"
          border
          label-width="150"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              姓名
            </div>
          </template>
              {{dateils.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              人事单位
            </div>
          </template>
          {{dateils.hrUnitName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              职工号
            </div>
          </template>
          {{dateils.account}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              手机号
            </div>
          </template>
          {{dateils.mobile}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              职称
            </div>
          </template>
          {{dateils.titleName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              所属单位
            </div>
          </template>
          {{dateils.unitName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              科学研究领域
            </div>
          </template>
          {{dateils.searchName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              一级学科
            </div>
          </template>
          {{dateils.firstLevel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              政治面貌
            </div>
          </template>
          {{getpolityName(dateils.polityId)}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              杰出人才
            </div>
          </template>
          {{ getHonorTitleName(dateils.honorTitleId) }}
<!--          {{dateils.honorTitleId}}-->
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              硕导/博导
            </div>
          </template>
          {{ getTutorTypeName(dateils.tutorTypeId) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              最后学历
            </div>
          </template>
          {{ getEduLevelName(dateils.eduLevelId) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              最后学位
            </div>
          </template>
          {{ getEduDegreeName(dateils.eduDegreeId) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              毕业院校
            </div>
          </template>
          {{dateils.graduateSchool}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              英文名
            </div>
          </template>
          {{dateils.nameEn}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              电子邮件
            </div>
          </template>
          {{dateils.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              办公电话
            </div>
          </template>
          {{dateils.telOffice}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              在职情况
            </div>
          </template>
          <span v-if="dateils.personState==1">
            在职
          </span>
          <span v-if="dateils.personState==3">
            离职
          </span>
          <span v-if="dateils.personState==2">
            退休
          </span>
<!--          {{dateils.personState}}-->
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              性别
            </div>
          </template>
          {{dateils.sexId==1?'男':'女'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              出生日期
            </div>
          </template>
          {{dateils.birthday}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              身份证号/护照号
            </div>
          </template>
          {{dateils.idCard}}
        </el-descriptions-item>
        <el-descriptions-item  span="3">
          <template #label>
            <div class="cell-item">
              研究方向
            </div>
          </template>
          {{dateils.researchField}}
        </el-descriptions-item>
        <el-descriptions-item  span="3">
          <template #label>
            <div class="cell-item">
              教育经历
            </div>
          </template>
          {{dateils.researchField}}
        </el-descriptions-item>
        <el-descriptions-item  span="3">
          <template #label>
            <div class="cell-item">
              出国经历
            </div>
          </template>
          {{dateils.experienceAbroad}}
        </el-descriptions-item>
        <el-descriptions-item  span="3">
          <template #label>
            <div class="cell-item">
              进修培训情况
            </div>
          </template>
          {{dateils.learning}}
        </el-descriptions-item>
        <el-descriptions-item  span="3">
          <template #label>
            <div class="cell-item">
              学术及社会兼职
            </div>
          </template>
          {{dateils.parttime}}
        </el-descriptions-item>
      </el-descriptions>
<!--      <div class="flex-text">-->
<!--        <div class="flex-box">-->
<!--          <div>教育经历:</div>-->
<!--          <div>-->
<!--            {{dateils.researchField}}-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-box">-->
<!--          <div>出国经历:</div>-->
<!--          <div>-->
<!--            {{dateils.experienceAbroad}}-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-box">-->
<!--          <div>进修培训情况:</div>-->
<!--          <div>-->
<!--            {{dateils.learning}}-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-box">-->
<!--          <div>学术及社会兼职:</div>-->
<!--          <div>-->
<!--            {{dateils.parttime}}-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';
import {defineProps,watch,ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated} from
      'vue'
import {personDetailsView,getCategory,researcherNavApi} from "@/api/researcherNavApi/researcherNavApi"
import {ElMessageBox} from "element-plus";
const getpolityName = (polityid)=>{
  if (polityid === undefined || polityid == null) {
  return '未知';
  }else{
    // getzhengzhimianmaoOptions()
    const matchedOption = zhengzhimianmaoOptions.value.find(item => item.code === polityid);
    return matchedOption? matchedOption.name : '未知';
  }

}
//政治面貌
const zhengzhimianmaoOptions = ref([])
const getzhengzhimianmaoOptions =function () {
  getCategory(
      {
        'bizName':'政治面貌'
      }
  )
      .then((res)=>{

        zhengzhimianmaoOptions.value = res.data
      })
}

const getTutorTypeName = (tutorTypeId) => {
  if (tutorTypeId === undefined || tutorTypeId == null) {
    return '未知';
  }
  const tutorTypeMap = {
    1: '博导',
    2: '硕导',
    3: '非导师'
  };
  return tutorTypeMap[tutorTypeId] || '未知';
};

const getEduLevelName = (eduLevelId) => {
  if (eduLevelId === undefined || eduLevelId == null) {
    return '未知';
  }
  const eduLevelMap = {
    3: '大专',
    4: '中专',
    0: '博士研究生',
    1: '硕士研究生',
    2: '本科',
    5: '其他'
  };
  return eduLevelMap[eduLevelId] || '未知';
};

const getEduDegreeName = (eduDegreeId) => {
  if (eduDegreeId === undefined || eduDegreeId == null) {
    return '未知';
  }
  const eduDegreeMap = {
    2: '博士',
    3: '硕士',
    4: '学士',
    999: '无'
  };
  return eduDegreeMap[eduDegreeId] || '未知';
};
const getHonorTitleName = (honorTitleIds) => {
  if (honorTitleIds === undefined || honorTitleIds == null) {
    return '未知';
  }
  const honorTitleMap = {
    1: '院士',
    2: '突出青年',
    3: '长江学者',
    4: '其他'
  };
  const ids = honorTitleIds.split(',');
  const names = ids.map((id) => honorTitleMap[id] || '未知');
  return names.join(', ');
};
let dateils = reactive({})
const props = defineProps({
  obj:String,
  activ:Boolean
});
// const ids = defineProps(['obj'])
// const props = defineProps(["obj",'activ'])

watch(() => props.obj, (newValue,oldValue) => {
  console.log(props.obj, newValue,'props.obj');
  if(newValue !== oldValue){
    personDetailsView(
        {id:props.obj}
    )
        .then((res)=>{
          Object.assign(dateils,res.data[0])
          getzhengzhimianmaoOptions()
        })

  }

})
watch(() => props.activ, (newValue,oldValue) => {

})

onBeforeMount(()=>{})// 生命周期 - 挂载之前
onMounted(()=>{


})// 生命周期 - 挂载完成（可以访问 DOM 元素）
onBeforeUpdate(()=>{})// 生命周期 - 更新之前
onUpdated(()=>{})// 生命周期 - 更新之后
onBeforeUnmount(()=>{})// 生命周期 - 销毁之前
onUnmounted(()=>{})// 生命周期 - 销毁完成
onErrorCaptured((err)=>{})// 当事件处理程序或生命周期钩子抛出错误时
onRenderTracked((e)=>{})// 渲染的时候可以追踪到
onRenderTriggered((e)=>{})// 重新渲染的时候触发
// 如果页面有 keep-alive 缓存功能,这个两个函数会触发
onActivated(()=>{


})//进入的时候触发
onDeactivated(()=>{})//离开的时候触发

</script>

<style scoped>
.flex-box{
  display: flex;
  margin: 10px;
}
.flex-box >div:first-child{
  font-weight: bolder;
  min-width: 110px;
  text-align: left;
}
</style>